<template>
  <div style="z-index:2;width:100%;height: 500px;overflow: scroll" @scroll="scrollEvent">
    <detail-banner :sightName="sightName" :bannerImg="bannerImg" :gallaryImgs="gallaryImgs"></detail-banner>
    <detail-header :scrolltop="scrolltop"></detail-header>
    <detail-list :list="list"></detail-list>
    <div style="width:100%;height: 500px" ></div>
  </div>
</template>

<script>
import DetailBanner from './compoment/Banner'
import DetailHeader from './compoment/Header'
import DetailList from './compoment/List'
import axios from 'axios'
export default {
  name: 'detail',
  data () {
    return {
      sightName: '',
      bannerImg: '',
      gallaryImgs: [],
      list: [],
      scrolltop: 0
    }
  },
  components: {
    DetailBanner,
    DetailHeader,
    DetailList
  },
  methods: {
    getDetailInfo () {
      // 拿到路由的id 返回给后端拿到对应数据
      // axios.get('/api/detail.json?id=' + this.$route.params.id).then(this.getDetailInfoSucc)
      // gitee线上请求
      axios.get('http://linhaoj.gitee.io/vue-travel/static/mock/detail.json?id=' + this.$route.params.id)
        .then(this.getDetailInfoSucc)
    },
    getDetailInfoSucc (res) {
      const resjson = res.data
      if (resjson.ret && resjson.data) {
        const datas = resjson.data
        this.sightName = datas.sightName
        this.bannerImg = datas.bannerImg
        this.gallaryImgs = datas.gallaryImgs
        this.list = datas.categoryList
      }
    },
    scrollEvent (e) {
      this.scrolltop = e.srcElement.scrollTop
    }
  },
  mounted () {
    this.getDetailInfo()
  }
}
</script>

<style scoped>

</style>
